<template>
  <div class="emergency" style="height:100%">
    <div class="container-box">
      <div class="page-container">
        <!-- 右侧部分 -->
        <div class="right-container">
          <el-row>
            <el-col :span="4">
              <el-button v-show="isShowBack" icon="el-icon-back" size="small" @click="$router.go(-1)">返回</el-button>
            </el-col>
          </el-row>
          <!-- 搜索框 -->
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input
                v-model="input_value"
                size="small"
                placeholder="请输入名称/标识符"
                style="width: 260px; margin-right: 24px"
                class="seach-input"
              ></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <el-button type="primary" size="small">查询</el-button>
            </el-form-item>
          </el-form>


          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-button
                type="primary"

                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增
              </el-button
              >
              <el-button disabled size="mini">批量删除</el-button>
            </el-col>
          </el-row>

          <el-table
            v-loading="loading"
            :data="roleList"

            :header-cell-style="{ background: '#F3F5FC' }"

          >
            <el-table-column type="selection" width="55" align="center"/>
            <!-- <el-table-column label="角色编号" prop="roleId" width="120" /> -->
            <el-table-column label="序号" align="center" width="80">
              <template slot-scope="scop">
                {{ scop.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="名称" prop="name"/>
            <el-table-column
              label="关联事件"
              prop="event"
              :show-overflow-tooltip="true"
            />

            <el-table-column label="创建时间" prop="dataCreateTime"/>
            <el-table-column label="更新时间" prop="dataUpdateTime">
            </el-table-column>
            <el-table-column label="启用状态" prop="groupType">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleAdd(scope.row)"
                >修改
                </el-button
                >
                <el-button
                  v-if="scope.row.parentId != 0"
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row)"
                >删除
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
          <konwledge-dia ref="k_dia"></konwledge-dia>
        </div>
      </div>
      <!-- 提示框 -->
    </div>
  </div>
</template>

<script>
import DiaForm from '../../../components/Common/DiaForm.vue'
import axios from 'axios'
import KonwledgeDia from '../../../components/Judge/knowledge/KonwledgeDia.vue'
import { mapMutations, mapState } from 'vuex'

export default {
  components: { DiaForm, KonwledgeDia },
  data() {
    return {
      open: false,
      // 总条数
      total: 14,
      //是否在加载
      loading: true,
      //   搜索框的值
      input_value: '',
      //   子组件传输的值
      checkList: [],
      // 角色表格数据
      roleList: [
        {
          name: '尝试连续登录安全保密产品',
          event: '尝试连续登录安全保密产品',
          dataCreateTime: '2022/7/18',
          dataUpdateTime: '2022/7/22',
          groupType: '已启用'
        },
        {
          name: '违规外联事件',
          event: '违规外联事件',
          dataCreateTime: '2022/7/4',
          dataUpdateTime: '2022/7/6',
          groupType: '已启用'
        },
        {
          name: '异常开机事件',
          event: '异常开机事件',
          dataCreateTime: '2022/7/2',
          dataUpdateTime: '2022/7/3',
          groupType: '已启用'
        },
        {
          name: '用户违规插入手机、录音录像设备',
          event: '用户违规插入手机、录音录像设备',
          dataCreateTime: '2022/6/28',
          dataUpdateTime: '2022/6/29',
          groupType: '已启用'
        },
        {
          name: '运维终端、服务器接入非授权通用移动存储介质',
          event: '运维终端、服务器接入非授权通用移动存储介质',
          dataCreateTime: '2022/6/21',
          dataUpdateTime: '2022/6/25',
          groupType: '已启用'
        },
        {
          name: '网络中出现黑域名、特种木马等',
          event: '网络中出现黑域名、特种木马等',
          dataCreateTime: '2022/6/15',
          dataUpdateTime: '2022/6/17',
          groupType: '已启用'
        },
        {
          name: '运维终端、服务器接入非授权涉密专用移动存储介质',
          event: '运维终端、服务器接入非授权涉密专用移动存储介质',
          dataCreateTime: '2022/6/14',
          dataUpdateTime: '2022/6/16',
          groupType: '已启用'
        },
        {
          name: '运维终端、服务器安装非授权软件',
          event: '运维终端、服务器安装非授权软件',
          dataCreateTime: '2022/6/9',
          dataUpdateTime: '2022/6/13',
          groupType: '已启用'
        },
        {
          name: '安全防护软件关键策略变化事件',
          event: '安全防护软件关键策略变化事件',
          dataCreateTime: '2022/5/23',
          dataUpdateTime: '2022/5/26',
          groupType: '已启用'
        },
        {
          name: '终端异常数据输出',
          event: '终端异常数据输出',
          dataCreateTime: '2022/5/19',
          dataUpdateTime: '2022/5/24',
          groupType: '已启用'
        },
        {
          name: '网路直接连接互联网',
          event: '网路直接连接互联网',
          dataCreateTime: '2022/5/19',
          dataUpdateTime: '2022/5/21',
          groupType: '已启用'
        },
        {
          name: '运维终端、服务器接入无线外设，如无线鼠标、无线键盘、无线网卡等',
          event: '运维终端、服务器接入无线外设，如无线鼠标、无线键盘、无线网卡等',
          dataCreateTime: '2022/5/17',
          dataUpdateTime: '2022/5/20',
          groupType: '已启用'
        },
        {
          name: '变更运维终端、服务器操作系统，如重装，双系统，安装虚拟机等',
          event: '变更运维终端、服务器操作系统，如重装，双系统，安装虚拟机等',
          dataCreateTime: '2022/5/17',
          dataUpdateTime: '2022/5/18',
          groupType: '已启用'
        }

      ],
      //   树形结构的值
      tree: [
        {
          title: '事件级别',
          name: 'sj',
          id: 1,
          child: [
            {
              title: '特别重大',
              num: 1,
              id: 1
            },
            {
              title: '重大',
              num: 10,
              id: 2
            },
            {
              title: '较大',
              num: 1,
              id: 3
            }
          ]
        },
        {
          title: '事件分类',
          name: 'jb',
          id: 2,
          child: [
            {
              title: '用户违规',
              num: 1,
              id: 4
            },
            {
              title: '运维异常',
              num: 10,
              id: 5
            },
            {
              title: '网络攻击',
              num: 1,
              id: 6
            }
          ]
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      }
    }
  },
  methods: {
    ...mapMutations({CHANGE_SHOWBACK:'portrait/CHANGE_SHOWBACK'}),
    // 获取子组件传参
    getSel(data) {
      this.checkList = data
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true
      this.title = '添加角色'
      this.$refs.k_dia.open = true
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true
      this.total = this.roleList.length
      this.loading = false
      // axios.get("test.json").then((res) => {
      //   this.roleList = res.data.data.list;
      //   this.total = res.data.data.total;
      //   this.loading = false;
      //   console.log(this.roleList);
      // });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除名称为"' + row.deptName + '"的数据项？')
        .then(function() {
          // return delDept(row.deptId);
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    }
  },
  destroyed(){
    this.CHANGE_SHOWBACK(false);
  },
  computed: {
    ...mapState({
      isShowBack: state => state.portrait.isShowBack
    })
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
  padding: 20px;

  .right-container {
    height: 100%;
    padding: 0;
    overflow-y: auto;

    .el-table {
      flex: none;
    }
  }

}

</style>
